<script lang="ts" setup>
import { useSystemStore } from '~/stores/system'
import { useOverviewStore } from '~/stores/request'

const router = useRouter()

const syStore = useSystemStore()
const overviewStore = useOverviewStore()

const go = (table: string) => {
  syStore.setSelectedTable(table)
  router.push(`/${table}`)
}

const result = computed(() => {
  return overviewStore.state?.data
})

const rotate = computed(() => {
  if (syStore.collapsed) {
    return {
      right: "-11px",
      transform: 'rotate(-90deg)'
    }
  }
  return {
    right: "-6px",
    transform: 'rotate(90deg)'
  }
})

const collapsedClick = () => {
  syStore.toggleCollapse()
}
</script>

<template>
  <div class="side-bar h-full">
    <div @click="collapsedClick" class="set" :style="rotate">
      <SVGIcon type="collapsed"/>
    </div>
    <template v-if="syStore.collapsed">
      <div class="row flex items-center" v-for="item in result" :key="item.label"
      :class="{ active: syStore.selectedTable === item.label }" @click="go(item.label)">
        <SVGIcon type="table"/>
        <button class="truncate">{{ item.label }}</button>
      </div>
    </template>
    <template v-else>
      <div class="row flex items-center" v-for="item in result" :key="item.label">
        <el-dropdown placement="bottom" @command="go" trigger="click">
          <SVGIcon type="table"/>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="item">
                <SVGIcon type="table"/>
                <button>{{ item.label }}</button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.side-bar {
  padding: 6px 10px 6px 10px;
  position: relative;
}

button {
  width: 100%;
  display: block;
  text-align: left;
  margin-left: 6px;
}

.row {
  padding: 6px 0 6px 6px;
}

.row:not(:first-child) {
  margin-top: 6px;
}

.row:hover,
.row.active {
  border-radius: calc(var(--el-radius) / 2);
  background-color: var(--el-selection-color);
}

.set {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
}
</style>
